<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
</head>

<body>

    <!-- 头部 -->
    <div th:include="head"></div>
    <div id="setting" class="center">
        <!-- 左侧导航栏 -->
        <div id="nav">
            <left-nav :menu="menu"></left-nav>
        </div>
        <!-- 右侧详情 -->
        <div id="detail">
            <!-- 基础信息 -->
            <div style="display: block;">
                <div class="headImage" :style='{"background-image":"url("+user.headImage+")"}'></div>
                <form class="ui form">
                    <div>
                        <table>
                            <tr>
                                <td>
                                    <label>昵称</label>
                                </td>
                                <td>
                                    <input v-model="user.name" type="text" name="name" required>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>密码</label>
                                </td>
                                <td>
                                    <input v-model="user.password" type="text" name="password" required>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>邮箱</label>
                                </td>
                                <td>
                                    <input v-model="user.email" type="email" name="email" required>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>邮箱</label>
                                </td>
                                <td>
                                    <input v-model="user.address" type="text" name="address" required>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>电话</label>
                                </td>
                                <td>
                                    <input v-model="user.tel" type="tel" name="tel" required>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>接收信息</label>
                                </td>
                                <td>
                                    <div class="list">
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="receive" checked value="0">
                                            <label>所有</label>
                                        </div>
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="receive" value="1">
                                            <label>我关注的</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>提醒</label>
                                </td>
                                <td>
                                    <div class="list">
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="remind" checked value="0">
                                            <label>所有</label>
                                        </div>
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="remind" value="1">
                                            <label>评论</label>
                                        </div>
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="remind" value="2">
                                            <label>点赞</label>
                                        </div>
                                        <div class="ui radio center">
                                            <input type="radio" tabindex="0" name="remind" value="3">
                                            <label>回复</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <input type="button" class="ui basic button" value="保存" @click="update(0)"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <!-- 我的 -->
            <div>
                <form class="ui form" action="updateAccount/me">
                    <table>
                        <tr>
                            <td>
                                <label>性别</label>
                            </td>
                            <td>
                                <label v-if="user.sex=='女'">女</label>
                                <label v-else>男</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>简介</label>
                            </td>
                            <td>
                                <textarea v-model="user.profile" name="profile" required></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="button" class="ui basic button" value="保存" @click="update(1)"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

            <!-- 黑名单 -->
            <div>
                <ul v-if="blocks">
                    <li v-for="(block,index) in blocks" @click="removeBlock(index, block)">
                        <user-info :user="block"></user-info>
                    </li>
                </ul>
                <p v-else>
                    你可以在用户主页将用户加入你的黑名单。在你黑名单中的用户无法在你文章下评论，无法在其它评论中提到你，无法给你发送私信，自动从你的粉丝列表移除且无法再关注你。
                </p>
            </div>
            <!-- 赞赏 -->
            <div>
                <form class="ui form">
                    <table>
                        <tr>
                            <td>
                                <label>赞赏</label>
                            </td>
                            <td>
                                <div class="list">
                                    <div class="ui radio center">
                                        <input type="radio" name="reward" checked>
                                        <label>打开</label>
                                    </div>
                                    <div class="ui radio center">
                                        <input type="radio" name="reward"/>
                                        <label>关闭</label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>描述</label>
                            </td>
                            <td>
                                <textarea name="rewardProfile" placeholder="该描述在用户打赏时可见" required>{{user.rewardProfile}}</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="button" class="ui basic button" value="保存" @click="update(2)"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <!-- 账号 -->
            <div>
                <button class="ui red button" @click="deleteAccount">删除账号</button>
                <span class="small gray">删除帐号是不可逆的操作，删除后将无法恢复，请谨慎操作。</span>
            </div>

        </div>
    </div>
    <script src="/js/setting.js"></script>
    <link rel="stylesheet" href="/css/setting.css">
</body>

</html>